Java Scriptで表を作成する
ホームページに掲載する表は、TABLEタグを使って作成するのが一般的です。
しかし、データ数に変更があった場合などは、TRタグやTDタグの内容を一つひとつ修正しなければならず、意外と面倒な作業が発生してしまいます。このような場合に役立つのが、JavaScriptを利用した表の作成です。
JavaScriptにより作成された表では、掲載するデータを変更するだけで表全体を修正できるようになります。

→ まずはサンプルを確認してください
 
Java Scriptで表を作成する サンプルページ


→ 表のデータを配列として定義する
 
最初に、表に掲載するデータをJavaScriptの変数、配列として定義していきます。

まず、表の行数を「n」という変数で定義してください。
続いて、各列のデータを「data1」「data2」という配列で定義します。
配列を定義するときの書式は、「配列名 = new Array(データ1、データ2、データ3、…)」となります。
同様に、繰り返し表示されるセルの背景色も配列「color」として定義してください。
<SCRIPT language="JavaScript">
<!--
n=7;
data1=new Array("月","火","水","木","金","土","日");
data2=new Array("4月7日","4月8日","4月9日","4月10日","4月11日","4月12日","4月13日");
color=new Array("#FFFFAA","#BBBBBB");
// -->
</SCRIPT>


→ 行の数だけ繰り返すループを作成する
 
次に、表を作成する部分の記述を行っていきます。
TABLEタグを記述し、その中に行数「n」だけ繰り返すループをJavaScriptで作成してください。
あとは、ループ内にdocument.writeで表の構成を記述していくだけで、JavaScriptによる表を作成できます。
<TABLE border="1" cellspacing="0" cellpadding="3">

<SCRIPT language="JavaScript">
<!--
for(i=0; i<n; i++){
}
// -->
</SCRIPT>

</TABLE>


→ document.writeでHTMLを記述する
 
ここでは、表の構成を記述する際のポイントとなる『各セルの背景色』について解説しておきましょう。
各セルの背景色は、TDタグのbgcolorオプションに配列「color」を指定することにより設定しています。
「color」の要素指定にある[i%2]では、演算子「%」を使って、繰り返し用の変数「i」を2で割ったときの“余り”を求めています。
つまり、「i」が0、1、2、3、…と進むに従い、color[i%2]は、color[0]、color[1]、color[0]、color[1]、…と2つの色が交互に設定されていくわけです。
<TABLE border="1" cellspacing="0" cellpadding="3">

<SCRIPT language="JavaScript">
<!--
for(i=0; i<n; i++){
  document.write("<TR>");
  document.write("<TD width=50 align=center bgcolor=" , color[i%2], ">");
  document.write(data1[i]);
  document.write("</TD>");
  document.write("<TD width=100 align=center bgcolor=" , color[i%2], ">");
  document.write(data2[i]);
  document.write("</TD>");
  document.write("</TR>");
}
// -->
</SCRIPT>

</TABLE>
  • 各セルのデータは、data1[i]、data2[i]の配列により自動生成される
  • セルの背景色は、color[i%2]の配列から自動生成される
なお、JavaScriptにより作成された表の修正は、最初のステップで定義した変数や配列を修正するだけで完了します。
各セルの背景色など、TR、TDタグでの設定はJavaScriptにより自動生成されるので、特に気にする必要はありません。

�e�����[�N����EC�i�r Yahoo �y�V LINE���f�[�^�����[�������z500�~�`�I
�����z�[���y�[�W �������N���W�b�g�J�[�h �C�O�i���q�����@�C�O���s�����������I �C�O�z�e��